//事件对象
//react 中触发的事件为合成事件，合成事件具有较好的浏览器兼容性
//合成事件对象中 可以获取到原生事件对象 及其DOM对象

//通过对象处理事件吃一些默认行为、事件冒泡、

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div onClick={this.handleTop}>
        <button onClick={this.handle}>点击</button>
        <div>
          <a href="https://www.baidu.com" onClick={this.goTo}>去百度</a>
        </div>
      </div>
    );
  }
  goTo(event){
    //阻止默认行为
    event.preventDefault()
     //阻止冒泡
     event.stopPropagation()
  }
  handleTop(){
    console.log('上级触发了');
  }
  handle(event){
    //默认事件触发后，可以在事件处理函数中，通过第一个形参，接收到事件对象
    console.log('点击到了');
    //合成事件对象
    console.log(event);
    //原生事件对象
    console.log(event.nativeEvent);
    //DOM节点
    console.log(event.target);
    console.log((event.target.style.color='red'));
    //阻止冒泡
    event.stopPropagation()
  }
}
